<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body  onkeydown="method02(event)" style="width: 100% ;height: 500px;border: red solid 1px ;margin: 0" >
<img id="stand" src="stand/z01.png" style="width: 72px;height: 67px;padding-left: 0;float: none">
<img id="runRight" src="runRight/r01.png" style="width: 85px;height: 67px; padding-left: 0;float: none">
<img id="runLeft" src="runLeft/l01.png" style="width: 85px;height: 67px; padding-left: 500px;float: none">
</body>
<script>
    var standPng = 1;
    function standMethod(){                                           //人物原地不动
       let stand = document.getElementById("stand");
       if (standPng<3){
           standPng++;
       }
       else{
           standPng=1;
       }
       stand.src = "stand/z0"+standPng+".png";
       setTimeout(standMethod,200);
    }
    setTimeout(standMethod,200);


    function method02(event){                                          //左右奔跑
        console.log(event);
        if (event.key==="d"){                                          //向右跑
            runRightMethod();
        }
        else if(event.key==="a"){
            runLeftMethod();                                           //向左跑
        }
    }
    var runRightPng = 1;
    var rightPX = 0;
    function runRightMethod(){                                        //向右跑方法
        rightPX +=5;
        let runRight = document.getElementById("runRight");
        if (runRightPng<8){
            runRightPng++;
        }
        else{
            runRightPng=1
        }
        runRight.src = "runRight/r0"+runRightPng+".png";
        runRight.style.cssText = " padding-left: "+ rightPX +"px ;float: none";
        setTimeout(standMethod,200);
    }
    var runLeftPng = 1;
    var leftPX = 500;
    function runLeftMethod(){                                        //向左跑方法
        leftPX -=5;
        let runLeft = document.getElementById("runLeft");
        if (runLeftPng<8){
            runLeftPng++;
        }
        else{
            runLeftPng=1
        }
        runLeft.src = "runLeft/l0"+runLeftPng+".png";
        runLeft.style.cssText = " padding-left: "+ leftPX +"px ;float: none";
        setTimeout(standMethod,200);
    }
</script>
</html>